<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<title></title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="">
	<link href="css/daterangepicker.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/lcommon.css">
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--[if lt IE 9]>
	<script src="js/html5shiv.min.js"></script>
	<script src="js/respond.min.js"></script>
<![endif]-->
<meta name="renderer" content="webkit">
<link rel="shortcut icon" href="favicon.ico">
<style>
	#container {
	 width: 100%;
	 height: 260px;
   }
 </style>
</head>
<body>
<div id="app" v-cloak  v-loading="loading">
	<header id="header"></header>
	<div class="header-space"></div>
	<div class="commonHeight">
		<template v-if="enterprise">
			<section class="section81">
				<div class="content">
					<div class="face">
						<img :src="enterprise.logo ? enterprise.logo : ''" alt="" class="cover">
					</div>
					<div class="left">
						<h3><b>{{enterprise.name}}</b></h3>
						<p>{{area}} | {{enterprise.typeName}}</p>
						<p>
							<span class="tag">{{enterprise.tradeName}}</span>
							<!-- <span class="tag">电子商务</span>
							<span class="tag">计算机软件</span> -->
						</p>
					</div>
				</div>
			</section>
			<section class="section82">
				<div class="content">
					<div class="intro">
						<div class="title">公司简介</div>
						<div class="con">
							{{enterprise.desc}}
						</div>
					</div>
					<div class="intro">
						<div class="title">企业相册</div>
						<div class="img-box" >
							<img v-for="(item , i) in enterprise.image" :key="i" :src="item.url" alt="" class="cover">
							<!-- <img src="images/img81.png" alt="" class="cover"> -->
						</div>
					</div>
					<!-- <div class="intro">
						<div class="title">团队介绍</div>
						<div class="con">
							<p>汤森路透集团是全球最大的专业信息服务提供商。我们将专业知识与创新科技相结合，为金融、法律、税务与财会、科学技术、知识产权和媒体等领域的专业人员和決策者提供重要的信息。集团总部位于纽约，主要分支机构设于英国伦敦、美国明尼苏达州伊根等地。集团在 103 个国家和地区设有分支机构，共有 5 万多名员工。</p>
						</div>
					</div> -->
					<div class="intro">
						<div class="title">公司地址</div>
						<div class="map-box">
							<div class="addr">
								<a href="">{{enterpriseAddr}}</a>
							</div>
							<div class="chart-box">
								<div id="container"></div>
								<!-- <img :src="enterprise.logo" alt="" class="cover"> -->
							</div>
						</div>
					</div>
				</div>
			</section>
			
			<section class="section83">
				<div class="content">
					<div class="title">招聘职位</div>
					<div class="filter">
						<a href="" class="on">全部</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
						<a href="">高级管理</a>
			
						<a href="" class="btn-more">查看更多</a>
					</div>
				</div>
			</section>
			
			
			
			
			<section class="section252">
				<div class="content">
					<div class="list">
						<div class="item" v-for="(item, i) in curPageList" :key="i">
							<div class="con">
								<h3><a :href="'07.html?id='+ item.id"><b>{{item.name}}</b></a> 
									<span class="orange e2">{{item.salary_min}}-{{item.salary_max}}K</span>
								</h3>
								<p>{{item.educationName}} | 全职 | {{item.experienceConfigName.max==0? item.experienceConfigName.min + "年以上" : item.experienceConfigName.min==0? item.experienceConfigName.max + "年以下" : (item.experienceConfigName.min+"-"+item.experienceConfigName.max+"年") }}</p>
								<p v-if="item.recruit_welfare">
									<span v-for="(tag, k) in item.recruit_welfare" :key="k" class="tag">{{tag.welfareName}}</span>
								</p>
							</div>
							<div class="con">
								<h3 v-show="false"><a href="">{{enterprise.name}}</a></h3>
								<p v-show="false">{{enterprise.address}} | {{enterprise.typeName}}</p>
								<p style="line-height:83px;"><time>{{item.createdFrom}}</time></p>
							</div>
							<div class="user">
								<a href="">
									<img :src="item.user && item.user.logo ? item.user.logo : ''" alt="" class="face">
									<h4>{{item.user && item.user.title ? item.user.title : ''}}</h4>
									<p>刚刚活跃</p>
								</a>
							</div>
							<a href="javascript:void(0)" @click="goutong(item)" class="btn">立即沟通</a>
						</div>
					</div>
			
			
					<div class="g-prvNxt">
						<a @click="getPage('pre')" href="javascript:void(0)" class="prev">&nbsp;</a>
						<a @click="getPage(item)" v-for="(item, i) in allPage" href="javascript:void(0)" :class="{on: page==item}">{{item}}</a>
						<a @click="getPage('next')" href="javascript:void(0)" class="next">&nbsp;</a>
						<select name="" id="pageSize">
							<option value="10">10条/页</option>
							<option value="20">20条/页</option>
							<option value="">30条/页</option>
							<option value="">40条/页</option>
							<option value="">50条/页</option>
						</select>
						跳至 
						<input type="text" value="" id="pageVal" class="input">
						页
						<input @click="changePage" type="submit" style="line-height: 32px;" value="确定" class="btn">
					</div>
				</div>
			</section>
		
		</template>
	</div>
	
	<footer id="footer"></footer>
</div>
<script src="js/jquery.min.js"></script>
<!-- <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> -->
<!-- <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> -->
<script src="js/common.js"></script>
<script src="js/lcommon.js"></script>
<script src="js/slide.min.js"></script>
<script src="js/polyfill.min.js"></script>
<script src="js/jquery.nicescroll3.7.6.min.js"></script>
<!-- <script src="js/main.js"></script> -->
<script src="js/moment.min.js"></script>
<script src="js/moment.locale.js"></script>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/request.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=24688df90aef7762942b8f9b94ba2e70&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script src="js/getPrepareData.js"></script>
<script>
	$(function(){
		$("#header").load("./lcommon/header.html"); 
		$("#footer").load("./lcommon/footer.html"); 
		$("header .menu li").eq(1).addClass('on')
		$("body").on('click', '.filter .btn-more', function(event) {
			event.preventDefault();
			$(this).parents(".filter").toggleClass('auto');
		});
		
		
	})
	
	var vm = new Vue({
		el:'#app',
		data:{
			loading:true,
			id: GetRequest().id || "",
			enterprise: undefined,
			typeList: [],
			tradeList: [],
			educationList: [],
			natureList: [],
			experienceList: [],
			tagList: [],
			curPageList: [],
			recruitList: [],//岗位信息
			page: 1,
			paegSize: 10,
			allPage: [],
			pageVal: "",
			region:'',
			area:'',
			enterpriseAddr:''
		},
		mounted(){
			var that = this
			this.indexprepare(function(data){
				that.$nextTick(function(){
					
				})
			})
			$("#app").on('change', '#pageSize', function(v){
				that.pageSize = $("#pageSize").val()
				that.getPage(that.page)
			})
		},
		methods: {
			getNameList(id, list, result=[]) {
				var nameKey = 'region_name'
				result = result || [];
				var item, val;
				for(var i =0; i< list.length; i++) {
					item = list[i];
					if(item.id === id) {
						result.push(item[nameKey])
						return result;
					}else if(item.children) {
						vm.getNameList(id, item.children, result);
						if(result.length) {
							result.unshift(item[nameKey]);
							return result
						}
					}
				}
				return result;
			},
			indexprepare:function(e,num){
				var vm = this
				var url = "person/index/prepare"
				var p = {

				}
				request(url,'GET',JSON.stringify({}),function(res){
					vm.typeList = res.data.type
					vm.tradeList = res.data.trade
					vm.educationList = res.data.education
					vm.natureList = res.data.nature
					vm.experienceList = res.data.experience
					vm.tagList = res.data.tag
					vm.region = res.data.region
					vm.getEnterprise()
				},function(err){
					vm.$message.error(err.message);
				})
			},

			getEnterprise:function(e,num){
				var vm = this
				var url = "person/enterprise/"+ this.id
				var p = {

				}
				request(url,'GET',JSON.stringify({}),function(res){
					res.data.enterprise.typeName = vm.getTypeName(res.data.enterprise.type_id)
					res.data.enterprise.tradeName = vm.getTradeName(res.data.enterprise.trade_id)
					vm.enterprise = res.data.enterprise
					vm.area = vm.getNameList(res.data.enterprise.area_id,vm.region).join('-')
					vm.enterpriseAddr = vm.getNameList(res.data.enterprise.area_id,vm.region).join('') + res.data.enterprise.address
					vm.loading = false
					setTimeout(function(){
						var map = new AMap.Map('container', {
							resizeEnable: true,
							zoom: 12,
							center: vm.enterprise.location
						});
							// 创建两个点标记
						var m1 = new AMap.Marker({
							position: vm.enterprise.location
						});
						map.add(m1);
					},1500)
					res.data.recruit.forEach(function( v) {
						v.createdFrom = moment(v.updated_at).fromNow()
						v.educationName = vm.getEducationName(v.education_id) //教育程度
						v.experienceConfigName = vm.getExperienceName(v.experience_config_id) //工作年限
						// v.enterprise_id = vm.getEducationName(v.enterprise_id) 
						// v.educationName = vm.getEducationName(v.education_id) 
						v.recruit_welfare.forEach(function(m) {
							m.welfareName = vm.getWelfareName(m.welfare_id) //岗位福利
						})
					});
					
					var allPage = Math.ceil(res.data.recruit.length / vm.paegSize)
					for(var i=1; i<=allPage; i++){
						vm.allPage.push(i)
					}
					vm.recruitList = res.data.recruit
					vm.getPage(1)
				},function(err){
					vm.loading = false
					vm.$message.error(err.message);
				})
			},
			getTypeName(id){
				var vm = this
				for(var i=0; i<vm.typeList.length; i++){
					if(vm.typeList[i].id==id){
						return vm.typeList[i].name
					} 
				}
				return ""
			},
			getTradeName(id){
				var vm = this
				for(var i=0; i<vm.tradeList.length; i++){
					if(vm.tradeList[i].id==id){
						return vm.tradeList[i].name
					} 
				}
				return ""
			},
			getEducationName(id){
				var vm = this
				for(var i=0; i<vm.educationList.length; i++){
					if(vm.educationList[i].id==id){
						return vm.educationList[i].name
					} 
				}
				return ""
			},
			getExperienceName(id){
				var vm = this
				for(var i=0; i<vm.experienceList.length; i++){
					if(vm.experienceList[i].id==id){
						return vm.experienceList[i]
					} 
				}
				return ""
			},
			getWelfareName(id){
				var vm = this
				for(var i=0; i<vm.tagList.length; i++){
					if(vm.tagList[i].id==id){
						return vm.tagList[i].name
					} 
				}
				return ""
			},
			getPage(i){
				var vm = this
				if(!i){
					return
				}
				
				if(i=="pre"){
					if(vm.page==1){
						return
					}
					i = vm.page-1
				} else if(i == "next"){
					if(vm.page==vm.allPage.length){
						return
					}
					i = vm.page+1
				} else if(typeof i =="string"){
					i = parseInt(i)
					if(!i){
						i = vm.page 
					} else {
						if(i>vm.allPage.length){
							i = vm.allPage.length
						} else if(i<=0){
							i = 1
						} 
					}
				}
				
				
				vm.page = i
				vm.curPageList = vm.recruitList.slice((vm.page-1)*vm.paegSize, (vm.page)*vm.paegSize)
			},
			changePage(){
				this.getPage($("#pageVal").val())
			},
			goutong(item){
				var vm = this
				var isLogin = lcheckLogin(vm)
				if(!isLogin){
					return
				}
				location.href = '05.html?uid='+ item.user.uid
			},
			// toDetail(item){
			// 	location.href=""
			// }
		},
	})
</script>
</body>
</html>